<!-- src/layouts/DoctorLayout.vue -->
<template>
  <div class="doctor-layout">
    <!-- 医生端通用布局 -->
    <el-container>
      <!-- 侧边导航 -->
      <el-aside width="200px">
        <div class="layout-header">
          <h3>医生工作台</h3>
        </div>

        <el-menu
            router
            :default-active="$route.path"
            class="doctor-menu"
        >
          <el-menu-item index="/doctor/appointments">
            <el-icon><calendar /></el-icon>
            <span>预约管理</span>
          </el-menu-item>

          <el-menu-item index="/doctor/consultations">
            <el-icon><chat-dot-round /></el-icon>
            <span>在线咨询</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main>
        <!-- 用户状态组件 -->
        <user-status class="user-status" />

        <!-- 子路由出口 -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {getAuth, getUserInfo} from '@/utils/auth'
import UserStatus from '@/components/UserStatus.vue'
import { Calendar, ChatDotRound } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const router = useRouter()

// 进入时验证医生权限
onMounted(() => {
  const auth = getAuth()
  const user = getUserInfo()
  // 未登录跳转
  if (auth === null) {
    router.replace('/login')
    return
  }

  // 角色验证
  if (user.type !== 1) {
    ElMessage.error('无权限访问医生界面')
    router.replace('/home')
  }
})
</script>

<style scoped>
.doctor-layout {
  height: 100vh;
  background: #f5f7fa;
}

.layout-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
}

.doctor-menu {
  height: calc(100vh - 60px);
  border-right: none;
}

.user-status {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1000;
}

.el-main {
  position: relative;
  padding-top: 60px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
